<route lang="json5">
{
  style: { navigationBarTitleText: 'My Feedback' },
}
</route>

<template>
  <view class="feedback-list">
    <view v-if="loading" class="loading-state">
      <wd-loading type="circle" />
      <text>Loading feedback...</text>
    </view>
    <view v-else-if="feedbacks.length === 0" class="empty-state">
      <text>No feedback history</text>
    </view>
    <view v-else class="feedback-cards">
      <view v-for="item in feedbacks" :key="item.id" class="feedback-card">
        <view class="header">
          <text class="scooter-id">Scooter #{{ item.scooterId }}</text>
          <text class="date">{{ formatDate(item.createdAt) }}</text>
        </view>
        <view class="content">
          <view class="rating">
            <text class="label">Severity:</text>
            <text :class="['value', getSeverityClass(item.rating)]">
              {{ getSeverityText(item.rating) }}
            </text>
          </view>
          <view class="comment">{{ item.comment }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getFeedbackList } from '@/service/feedback'

const loading = ref(false)
const feedbacks = ref([])

const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })
}

const getSeverityText = (rating) => {
  const texts = {
    1: 'Minor Issue',
    2: 'Moderate Issue',
    3: 'Serious Issue',
  }
  return texts[rating] || 'Unknown'
}

const getSeverityClass = (rating) => {
  const classes = {
    1: 'minor',
    2: 'moderate',
    3: 'serious',
  }
  return classes[rating] || ''
}

const fetchFeedbackList = async () => {
  loading.value = true
  try {
    const { data } = await getFeedbackList()
    feedbacks.value = data.records || []
  } catch (error) {
    uni.showToast({
      title: 'Failed to load feedback',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchFeedbackList()
})
</script>

<style lang="scss">
.feedback-list {
  padding: 16px;
  min-height: 100vh;
  background: #f5f5f5;
}

.feedback-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .scooter-id {
      font-weight: bold;
      color: #333;
    }

    .date {
      font-size: 14px;
      color: #999;
    }
  }

  .content {
    .rating {
      margin-bottom: 8px;

      .label {
        color: #666;
        margin-right: 8px;
      }

      .value {
        &.minor {
          color: #52c41a;
        }
        &.moderate {
          color: #faad14;
        }
        &.serious {
          color: #ff4d4f;
        }
      }
    }

    .comment {
      color: #333;
      line-height: 1.5;
    }
  }
}

.loading-state,
.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #999;
}
</style>
